<!--
 * @Author: sunli
 * @Date: 2022-01-25 16:25:52
 * @LastEditTime: 2023-02-16 15:29:40
 * @LastEditors: sunli
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /etrip-ui/src/pages/pullRefresh/demo.vue
-->
<template>
  <div>
      <PullRefresh
      >
        <!-- <template #topPullText>
        下拉刷刷新<i class="iconfont icon-etrip-select"></i>
      </template> -->
        <ul class="loadmore-list" v-if="res.dataList && res.dataList.length">
          <li :key="i" class="loadmore-list-item" v-for="i of res.dataList">
            <img src="../../assets/logo_1.png" />
            {{ `I am item ${i} ` }}
          </li>
        </ul>
        <span v-else>暂无数据</span>
      </PullRefresh>
      <!-- <div class="foot">底部</div> -->
    </div>
</template>

<script setup>
import navbar from '../../../packages/navBar/index.vue'
import PullRefresh from '../../../packages/pullRefresh/index.vue'
import { ref, nextTick } from 'vue'

const loadmoreEl = ref()
const res = ref({
})
const currentPage = ref(1)

nextTick(async () => {
  await requestData()
})

const requestData = async () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      res.value = {
        dataList: [1, 2, 3, 4, 5, 6, 7, 8, 8, 9, 9],
        currentPage: currentPage.value,
        totalPage: 3
      }
      if (currentPage.value !== 1) {
        for (let i = 0, len = currentPage.value; i < len; i++) {
          res.value.dataList = res.value.dataList.concat([1, 2, 3, 4, 5, 6, 7, 8, 8, 9, 9])
        }
      }
      resolve()
    }, 1000)
  })
}
</script>

<style scoped lang="scss">
.loadmore {
  top: 45px;
  bottom: 100px;
}

.loadmore-list {
  padding: 10px;
}

.loadmore-list-item {
  height: 80px;
  margin-bottom: 10px;
  list-style: none;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
  img {
    width: 50px;
  }
}
.foot {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 30px;
  background: #333;
}
</style>